<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="com.lp.cfg.ProConfig"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/WEB-INF/oss/iot/common/variable.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/variable_js.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/resource_lib.jsp"%>
<script type="text/javascript" src="<%=basePath%>/lib/distpicker/distpicker.data.js"  charset="UTF-8"></script>
<script type="text/javascript" src="<%=basePath%>/lib/distpicker/distpicker.js"  charset="UTF-8"></script>
<style type="text/css">
	
	.dashboard-menu{
		border-top:1px solid #ecf0f5;
	}
	.app-container{
		background:  #f2f2f2;width: 100%;border-top:1px solid #ecf0f5;
	}
	
	.box-white {
	    width: 97%;
	    min-width: 897px;
	    padding-bottom: 0;
	    margin: 0 auto;
	}
	.box {
	    padding: 10px;
	    padding-top:1px;
	    border-left: 1px solid #d2d6de;
	    border-right: 1px solid #d2d6de;
	    border-bottom: 1px solid #d2d6de;
	}
	.box {
	    border: 0!important;
	    box-shadow: 0 0 2px 1px rgba(13,5,9,.08)!important;
	}
	.box {
	    position: relative;
	    border-radius: 3px;
	    background: #fff;
	    border-top: 3px solid #d2d6de;
	    margin-bottom: 20px;
		margin: 0 auto;
	    box-shadow: 0 1px 1px rgba(0,0,0,.1);
	}
	.sceneList-info{
		padding-top: 10px;
		padding-left: 10px;
	}
	.p-title{
		padding: 20px 0;
		font-size: 20px;
		margin-left: -50px;
	}
</style>
</head>
<body>
	<div>
		<!--  下方部位  -->
		<div class="bgcontainer" >
			<div class="" >
				<div class="">
					<div class="container-layout sceneList-info">
						<div class="box join-device-box" > 
							<div class="clearfix" style="width: 600px;">
								<div>
									<div style="padding:10px" type-option="form_submit" id="userInfoHeader" 
										  config-option="url:'/user/self', method :'put',
														  submit :'.modify-Btnx',
														  success:'sunccessRe' ">
											
											<div class="form-line">
												<span>Username：</span>
												<div class="pb-10 pt-10">
													<input  value="${user.name}" readonly="readonly" class="layui-input" >
												</div>	
											</div>
											<div class="form-line">
												<span>User Type:</span>
											<!--	<div class="pb-10 pt-10 layui-nav-item layui-hide-xs">
												<c:choose>
													<c:when test="${user.data.type eq '超级管理员'}"><input value="Super" readonly="readonly" class="layui-input" ></c:when>
													<c:when test="${user.data.type eq '管理员'}"><input  value="Administrator" readonly="readonly" class="layui-input" ></c:when>
													<c:when test="${user.data.type eq '普通用户'}"><input  value="Normal" readonly="readonly" class="layui-input" ></c:when>
												</c:choose>-->
												<div class="pb-10 pt-10">
													<input  value="${user.data.type}" readonly="readonly" class="layui-input" >
												</div>
											</div>
											<div class="form-line relative">
												<span>API-KEY：</span>
												<div class="pb-10 pt-10">
													<span class="layui-input api-value" style="background: #eeeeee; line-height:38px;" >*****${fn:substring(user.user_key, 5, 25)}*****</span>
													<img class="eyeApiKey" style="position: absolute;top: 33px;right: 10px;cursor: pointer;" 
														onclick="showApiKey('${user.user_key}')"  src="<%=basePath%>/image/oss/iot/eye.png">						
												</div>
											</div>
											<div class="form-line">
												<span>Mobile phone number:</span>
												<div class="pb-10 pt-10">
													<input placeholder="Mobile phone number:"  type-name="phone" value="${user.phone}" validate="phone:Please enter the correct phone format" class="layui-input" >
												</div>
											</div>
											<div class="form-line">
												<span>Email：</span>
												<div class="pb-10 pt-10">
													<input placeholder="Email"  type-name="email" value="${user.email}" validate="email:Please enter the correct email format" class="layui-input" >
												</div>
											</div>
											<div class="form-line">
												<span>Text message:</span>
												<div class="pb-10 pt-10">
													<input value="" readonly="readonly" class="layui-input sms_num" >
												</div>
											</div>
											<div class="form-line">
												<span>Voice:</span>
												<div class="pb-10 pt-10">
													<input  value="" readonly="readonly" class="layui-input voice_num" >
												</div>
											</div>
											<div class="form-line clearfix">
												<button class="modify-Btnx  ml-20 layui-btn layui-btn-normal float-right">Edit</button>
											</div>
									</div>									
								</div>
							</div>
						</div>
						
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

<script type="text/javascript">

	$(function(){
		// 根据user_info 获取用户信息
		getAjax(localUrl + "/user/account.json?user_id=${user.id}", function(data){
			if(isOK(data) ){
				$(".sms_num").val(data.data.sms_num );
				$(".voice_num").val(data.data.voice_num );
			}
		});
		
	});

	function showApiKey(info){ 
		$(".api-value").html(info);
	}
	function sunccessRe(data){
		if(isOK(data)){
			tip("Modified successfully");
		}else{
			tip(data.statusMsg);
		}
	}
</script>
</html>